import {Form, Input, Button, message, Upload, Card} from "antd";
import { UploadOutlined } from '@ant-design/icons';
import {useNavigate} from "react-router-dom";
import {useState} from "react";

const PostVideo = () =>{

    const navigate = useNavigate();
    const [fileList, setFileList] = useState([]);

    const token = window.sessionStorage.getItem("token");
    console.log("界面token:", token);

    const normFile = (e) => {
        if (Array.isArray(e)) {
            return e;
        }
        return e?.fileList;
    };

    const props = {
        onRemove: file => {
            setFileList(prevList => {
                const index = prevList.indexOf(file);
                const newFileList = prevList.slice();
                newFileList.splice(index, 1);
                return newFileList;
            });
        },
        beforeUpload: file => {
            setFileList(prevList => [...prevList, file]);
            return false; // Prevent automatic upload
        },
        fileList,
    };

    const onFinish = (values) => {
        const formData = new FormData();
        formData.append('title', values.title);
        if (fileList.length > 0) {
            formData.append('file', fileList[0]);
        } else {
            message.error('视频文件不能为空！');
            return;
        }

        fetch('http://58.87.105.2:8080/video', {
            method: 'POST',
            headers: {
                ContentType: 'application/form-data',
                token: `${token}`,
            },
            body: formData,
            withCredentials: true,
        })
            .then(response => response.json())
            .then(data => {
                message.success('视频发布成功');
                navigate('/user');
            })
            .catch(error => {
                message.error('视频发布失败');
            });
    };

    return(
        <div className="postVideo-container">
            <Card className="postVideo-card">
                <Form
                    labelCol={{ span: 4,}}
                    wrapperCol={{span: 14,}}
                    layout="horizontal"
                    style={{maxWidth: 600,}}
                    onFinish={onFinish}
                >
                    <Form.Item label="视频主题" name="title"
                               rules={[
                                   {
                                       required: true,
                                       message: '视频主题不能为空！',
                                   },
                               ]}>
                        <Input placeholder='请输入视频主题' style={{marginLeft:'10px'}}/>
                    </Form.Item>
                    <Form.Item label="视频文件" name="video" valuePropName="fileList"
                               getValueFromEvent={normFile}
                               rules={[{ required: true, message: '视频文件不能为空！',}]}>
                        <Upload {...props} >
                            <Button icon={<UploadOutlined />}> 点击上传视频 </Button>
                        </Upload>
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" htmlType="submit" style={{marginLeft:'60px'}}> 发布 </Button>
                    </Form.Item>
                </Form>
            </Card>
        </div>
    )
};

export default PostVideo;
